<template>
	<view :class="[stopMove ? 'hidden' : '','index-container']">
		<u-image width="750" src="https://photo.hiyipin.net/USER/922b8555-d455-4a11-8dfb-4ca03c4411ca.png" height="360"></u-image>

		<u-dropdown ref="uDropdown" :duration="0" class="u-dropdown" active-color="#FF4D46" @open="onDropDownOpen" @close="onDropDownClose">
			<u-dropdown-item @change="updateList($event,'queryDistance')" active-color="#FF4D46" v-model="value1" :title="queryDistanceText"
			 :options="options1"></u-dropdown-item>
			<u-dropdown-item active-color="#FF4D46" :title="oilNoText">
				<view style="background-color: #fff;" class="oil">
					<scroll-view style="height: 500rpx;" scroll-y>
						<view class="oil-popup">
							<view class="item" v-for="(e,i) in oils" :key="i">
								<view class="title">{{e.title}}</view>
								<view class="btn" v-for="(item,index) in e.childs" :key="index">
									<view @click="choiceOil(i,index,item)" :style="{
										'width':'152rpx',
										'border-color':oilPIndex == i && oilCIndex == index ? '#FD3129' : 'rgba(0,0,0,.1)',
										'color':oilPIndex == i && oilCIndex == index ? '#fff' : '#000',
										'background-color':oilPIndex == i && oilCIndex == index ? '#FD3129' : ''
									}"
									 size="mini">{{item.label}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item active-color="#FF4D46" @change="updateList($event,'order')" v-model="value3" :title="orderText"
			 :options="options3"></u-dropdown-item>
			<u-dropdown-item active-color="#FF4D46" :title="brandTypeText">
				<view style="background-color: #fff;" class="brand">
					<scroll-view style="height: 500rpx;" scroll-y>
						<u-cell-group :border="false">
							<u-cell-item @click="cellClick(item)" :arrow="false" :title="item.label" v-for="(item, index) in options4"
							 :key="index" :title-style="{
								color: item.check ? '#FF4D46' : '#606266'
							}">
								<u-icon v-if="item.check" name="checkbox-mark" color="#FF4D46" size="32"></u-icon>
							</u-cell-item>
						</u-cell-group>
					</scroll-view>
					<view class="btn">
						<view @click="closeDropdown">取消</view>
						<view @click="updateList('','brandType')">确认</view>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown>

		<view class="list">
			<u-empty mode="list" margin-top="300" v-if="fail"></u-empty>
			<block v-else>
				<view class="item" v-for="(item,index) in list" :key="index" @click="$u.route('/pages/other/oilDetail/oilDetail',{
					gasIds:item.gasId,
					distance:item.distance
				})">
					<u-image :src="item.gasLogoSmall" width="220" height="220" border-radius="20"></u-image>
					<view class="info">
						<view class="title">{{item.gasName}}</view>
						<view class="address">{{item.gasAddress}}</view>
						<view class="distance">距离：{{item.distance || '未知'}}</view>
						<view class="money">
							<view>
								<text>￥</text>{{item.gasOilPrice.priceYfq || '未知'}}
							</view>
							<view>
								油站价￥{{item.gasOilPrice.priceGun || '未知'}}
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<block v-if="!fail">
			<u-gap></u-gap>
			<u-loadmore :status="status" />
		</block>
	</view>
</template>

<script>
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	import QQMapWX from "@/common/qqmap-wx-jssdk.min"
	let qqmapsdk = ''
	export default {
		data() {
			return {
				oilPIndex: 0,
				oilNoText: '92#',
				orderText: '智能排序',
				oils: [{
						title: '汽油',
						childs: [{
								label: '90#',
								value: '90'
							},
							{
								label: '92#',
								value: '92'
							},
							{
								label: '95#',
								value: '95'
							},
							{
								label: '98#',
								value: '98'
							},
							{
								label: '101#',
								value: '101'
							}
						]
					},
					{
						title: '柴油',
						childs: [{
								label: '-40#',
								value: '-40'
							},
							{
								label: '-35#',
								value: '-35'
							},
							{
								label: '-30#',
								value: '-30'
							},
							{
								label: '-20#',
								value: '-20'
							},
							{
								label: '-10#',
								value: '-10'
							},
							{
								label: '0#',
								value: '0'
							}
						]
					}
					// {
					// 	title: '天然气',
					// 	childs: [
					// 		{
					// 			label: 'CNG',
					// 			value: 'CNG'
					// 		},
					// 		{
					// 			label: 'LNG',
					// 			value: 'LNG'
					// 		}
					// 	]
					// }
				],
				oilCIndex: 1,
				queryDistanceText: '6km内',
				queryDistance: '',
				fail: false,
				list: [],
				stopMove: false,
				status: 'loading',
				tabIndex: 0,
				value1: 1,
				value3: '',
				options1: [{
						label: '6km内',
						value: 6
					},
					{
						label: '10km内',
						value: 10
					},
					{
						label: '15km内',
						value: 15
					},
					{
						label: '20km内',
						value: 20
					},
					{
						label: '50km内',
						value: 50
					},
					{
						label: '100km内',
						value: 100
					}
				],
				brandTypeText: '全部品牌',
				options3: [{
						label: '智能排序',
						value: ''
					},
					{
						label: '距离优先',
						value: null
					},
					{
						label: '价格优先',
						value: 'priceYfq'
					}
				],
				options4: []
			};
		},
		mounted() {
			this.pageNo = 1
			this.oilNo = 92
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			if (uni.getStorageSync('locationPermission')) {
				let locationPermission = uni.getStorageSync('locationPermission')
				let BD_Coordinate = WSCoordinate.transformFromGCJToBaidu(locationPermission.latitude, locationPermission.longitude)
				this.longitude = BD_Coordinate.longitude
				this.latitude = BD_Coordinate.latitude
				this.original_longitude = locationPermission.longitude
				this.original_latitude = locationPermission.latitude
				this.getList(res => {
					if (res == '') {
						this.fail = true
						return
					}
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
					this.list = res
				})
			} else {
				const self = this
				//#ifdef MP
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success(res) {
						self.original_longitude = res.longitude
						self.original_latitude = res.latitude
						let BD_Coordinate = WSCoordinate.transformFromGCJToBaidu(res.latitude, res.longitude)
						self.latitude = BD_Coordinate.latitude
						self.longitude = BD_Coordinate.longitude
						self.getList(res => {
							if (res == '') {
								self.fail = true
								return
							}
							self.status = res.length < 10 ? 'nomore' : 'loadmore'
							self.list = res
						})
					},
					fail() {
						self.getList(res => {
							if (res == '') {
								self.fail = true
								return
							}
							self.status = res.length < 10 ? 'nomore' : 'loadmore'
							self.list = res
						})
					}
				})
				//#endif

				//#ifdef H5
				self.getList(res => {
					if (res == '') {
						self.fail = true
						return
					}
					self.status = res.length < 10 ? 'nomore' : 'loadmore'
					self.list = res
				})
				//#endif
			}

			this.$u.get('gasoilstation/getBrandList').then(res => {
				this.options4 = res.map(item => {
					return {
						check: true,
						label: item.gasBrandName,
						value: item.gasBrandType
					}
				})
				// this.brandType = this.options4.map(item=>{
				// 	return item.value
				// })
			})
		},
		methods: {
			cellClick(item){
				console.log(item);
				item.check = !item.check
			},
			choiceOil(i, index, item) {
				this.oilPIndex = i;
				this.oilCIndex = index
				this.closeDropdown()
				// this.oilNo = oilNo
				console.log(item.value);
				this.oilNo = item.value
				this.pageNo = 1
				this.fail = false
				this.status = 'loading'
				this.oilNoText = item.label
				this.getList(res => {
					if (res == '') {
						this.fail = true
						return
					}
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
					this.list = res
				})
				// console.log(this.info.newOilPriceList[i][index]);
			},
			updateList(e, scene) {
				console.log(e);
				switch (scene) {
					case 'queryDistance':
						this.queryDistance = e
						this.queryDistanceText = this.options1[this.options1.findIndex(item => item.value == e)].label
						break
					case 'brandType':
						let brandType = this.options4.filter(item => item.check == true).map(item => {
							return item.value
						})
						this.brandType = brandType
						this.brandTypeText = this.brandType.length == this.options4.length ? '全部品牌' : '部分品牌'
						this.closeDropdown()
						break
					case 'order':
						this.order = e == null ? '' : e
						this.orderText = this.options3[this.options3.findIndex(item => item.value == e)].label
				}
				this.pageNo = 1
				this.fail = false
				this.status = 'loading'
				this.getList(res => {
					if (res == '') {
						this.fail = true
						return
					}
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
					this.list = res
				})
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			reachBottom() {
				if (this.status == 'loading' || this.status == 'nomore') return
				this.status = 'loading';
				this.pageNo++
				this.getList(res => {
					if (res == '') {
						this.status = 'nomore'
						return
					}
					this.status = 'loadmore'
					this.list = this.list.concat(res)
				});
			},
			getList(callback) {
				let self = this
				this.$u.post('gasoilstation/list', {
					latitude: this.latitude || '',
					longitude: this.longitude || '',
					pageNo: this.pageNo,
					pageSize: 10,
					queryDistance: this.queryDistance || '',
					brandType: this.brandType || '',
					oilNo: this.oilNo || '',
					order: this.order || ''
				}).then(res => {
					// let arr = []
					if (res.list != '') {
						res.list.forEach((item, index) => {
							let distance = item.distance < 1000 ? item.distance + '米' : (Math.round(item.distance / 100) / 10).toFixed(1) +
								'公里'
							item.distance = distance

							// let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
							// qqmapsdk.calculateDistance({
							// 	from: `${self.original_latitude},${self.original_longitude}`,
							// 	to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
							// 	success({
							// 		result
							// 	}) {
							// 		let {
							// 			elements
							// 		} = result
							// 		let distance = elements[0].distance
							// 		distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
							// 			'公里'
							// 		item.distance = distance
							// 		arr.push(item)
							// 		if (index == res.list.length - 1) {
							// 			callback(arr)
							// 		}
							// 	}
							// })
						})
					}
					callback(res.list)
				}).catch(error => {
					this.status = 'loadmore'
				})
			},
			onDropDownClose() {
				this.stopMove = false
			},
			onDropDownOpen(e) {
				this.stopMove = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oil-popup {
		padding: 0 15rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;

		.item {
			margin-top: 30rpx;

			&:first-child {
				margin-top: 0;
			}

			>.title {
				padding: 0 15rpx;
				margin-bottom: 20rpx;
			}

			.btn {
				display: inline-block;
				margin: 10rpx 15rpx;

				view {
					text-align: center;
					font-size: 22rpx;
					line-height: 55rpx;
					padding: 0 20rpx;
					border: 1rpx solid rgba($color: #000000, $alpha: .1);
					border-radius: 10rpx;
				}
			}
		}
	}

	.brand {
		.btn {
			display: flex;

			>view {
				flex: 1;
				text-align: center;
				line-height: 100rpx;

				&:last-child {
					color: #FFFFFF;
					background: linear-gradient(90deg, #FD3129, #FF4D46);
				}
			}
		}

		.item {
			padding: 26rpx 32rpx;
			line-height: 54rpx;
		}
	}

	.hidden {
		position: fixed;
		height: 100%;
		overflow: hidden;
		left: 0;
	}

	.list {
		margin: 0 30rpx;

		.item {
			border-radius: 20rpx;
			box-shadow: 0px 0 12px 1px rgba(203, 203, 202, 0.2);
			display: flex;
			margin-top: 30rpx;

			&:first-child {
				margin-top: 0;
			}

			.info {
				padding: 20rpx 0;
				flex: 1;
				margin-left: 30rpx;
				position: relative;

				.title {
					font-weight: bold;
					width: 410rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 36rpx;
				}

				.address,
				.distance {
					font-size: 24rpx;
					color: #aaa;
				}

				.address {
					width: 410rpx;
					padding-top: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.distance {
					padding: 5rpx 0;
				}

				.money {
					display: flex;
					align-items: center;
					position: absolute;
					bottom: 20rpx;
					left: 0;
					width: 100%;

					>view {
						&:last-child {
							font-size: 24rpx;
							margin-left: 15rpx;
							color: #aaa;
							text-decoration: line-through;
						}

						&:first-child {
							color: #FF4D46;
							font-size: 36rpx;
							font-weight: bold;

							text {
								font-size: 24rpx;
								font-weight: normal;
							}
						}
					}
				}
			}
		}
	}
</style>
